<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>当地美食</title>
	<link rel="stylesheet" href="css/index.css" />
	<link rel="stylesheet" href="css/common.css" />
	<link rel="stylesheet" href="css/iconfont.css" />
	<link rel="stylesheet" href="./css/swiper.min.css">
	<link rel="stylesheet" href="./css/delicacy.css">
</head>

<body>
<div>
	<div class="xtx_topnav">
		<div class="wrapper">
			<!-- 顶部导航 -->
			<ul class="xtx_navs">
				<li>
					<a href="./login.html">请先登录</a>
				</li>
				<li>
					<a href="./register.html">免费注册</a>
				</li>
				<li>
					<a href="javascript:;">我的订单</a>
				</li>
				<li>
					<a href="javascript:;">会员中心</a>
				</li>
				<li>
					<a href="javascript:;">帮助中心</a>
				</li>
				<li>
					<a href="javascript:;">在线客服</a>
				</li>
				<li>
					<a href="javascript:;">
						<i class="mobile sprites"></i>
						手机版
					</a>
				</li>
			</ul>
		</div>
	</div>
	<script>
		//首页渲染登录的用户名和退出登陆
		const li1 = document.querySelector('.xtx_navs li:first-child')
		const li2 = li1.nextElementSibling
		function render() {
			const uname = sessionStorage.getItem('xtx-uname')
			if (uname) {
				li1.innerHTML = `
						<a href='#'>
							<img src="./img/iconfont/daibiao.png" style="width:13px";height:'13px'/>&nbsp;
								${uname}
						</a>`
				li2.innerHTML = `<a href='#'>退出登陆</i></a>`
			} else {
				li1.innerHTML = `<a href='./login.html'>请先登录</a>`
				li2.innerHTML = `<a href='./register.html'>免费注册</a>`
			}
		}
		render()
		//退出登陆
		li2.addEventListener('click', function () {
			sessionStorage.removeItem('xtx-uname')
			render()
		})
	</script>
	<!-- 头部 -->
	<div class="xtx_header">
		<div class="wrapper">
			<!-- 网站Logo -->
			<div class="xtx_logo"></div>
			<!-- 主导航 -->
			<div class="xtx_navs">
				<ul class="clearfix">
					<li>
						<a href="./index.html">首页</a>
					</li>
					<li>
						<a href="recommend.html">热门推荐</a>
					</li>
					<li>
						<a href="delicacy.html">当地美食</a>
					</li>
					<li>
						<a href="travel.html">极速出行</a>
					</li>
					<li>
						<a href="relation.html">社交广场</a>
					</li>
					<li>
					  <a href="youxue.html">我的游学</a>
					</li>
				</ul>
			</div>
			<!-- 站内搜索 -->
			<div class="xtx_search clearfix">
				<!-- 购物车 -->
				<a href="#" class="xtx_search_cart sprites">
					<i>2</i>
				</a>
				<!-- 搜索框 -->
				<div class="xtx_search_wrapper">
					<input type="text" placeholder="搜一搜">
				</div>

			</div>
			<div style="margin-left: 15px;">
				<i style="font-size: 24px;" class="iconfont icon-setting"></i>
			</div>
		</div>
	</div>

	<div class="delicacy">
		<div class="delicacy-color">
			<img src="./img/de01.png" />

			<div class="boxOne">
				<h1>饮食健康</h1>
			</div>
			<div class="boxTwo">
				<div class="boxTwo-left">
					<h1>饮食健康</h1>
					<p>早晨起来喝一杯凉白开，有利于肝肾代谢和降低血压，防止心肌梗塞，有的人称之为"复活水"。
						有关专家认为，人经过几个小时的睡眠后，消化道已经排空，晨起饮一杯凉开水，能很快被吸
						收进入血液循环，释放血液，等于对体内各器官进行了一次"内洗涤"。注意饮用水健康，水是
						生命之源。不要渴了再喝水。</p>
					<div class="boxTwo-left-text">
						<a href="#">了解更多</a>
					</div>
				</div>
				<img src="./img/de02.png" />
			</div>
			<div class="boxThree">
				<img src="./img/de03.png" />
				<div class="boxThree-right">
					<h1>饮食健康</h1>
					<p>其实果蔬除了对人体健康有利外，也因为果蔬中含有各种有机酸、芳香物质及各种色素成分，
						对调解人们的口味也有重要的意义，饮食中适当的搭配果蔬，人们就可以烹调出各种口味、色香
						味俱全的菜肴，这样。既达到了减肥保健的目的，又满足了口福，何乐而不为呢!。</p>
					<div class="boxThree-right-text">
						<a href="#">了解更多</a>
					</div>
				</div>
			</div>
		</div>
		<div class="alls">
			<div class="filter">
				<a data-index="1" href="javascript:;">0-100元</a>
				<a data-index="2" href="javascript:;">100-300元</a>
				<a data-index="3" href="javascript:;">300元以上</a>
				<a class="sdx" href="javascript:;">全部区间</a>
			</div>
			<div class="list">
			</div>
		</div>



		<div class="boxFour">
			<div class="boxFourTitle">
				<div class="boxFourTitleRight">
					<div class="biji"><a href="javascript:;" class="activeq" data-id="0">精华笔记</a></div>
					<div class="rizhi"><a href="javascript:;" data-id="1">精华日志</a></div>
				</div>
				<div class="boxFourTitleLift">
					<p><a href="#">咨询频道</a></p>
					<p><a href="#">全部笔记</a></p>
					<p><a href="#">全部日志</a></p>
					<p><a href="#">社区首页</a></p>
				</div>
			</div>
			<div class="boxFourBody">
				<div class="boxFourBodyBox">
					<div class="boxFourBodyhezi">
						<div class="boxFourBodyheziTop">
							<img src="./img/tx11.jpg" />
							<div class="boxFourBodyheziTopqiqi">
								<h1>奇葩人类</h1>
								<p>10小时前</p>
							</div>
						</div>
						<div class="boxFourBodyheziModdle">
							<h3>今天的胃是128G的</h3>
						</div>
						<div class="boxFourBodyheziBottom">
							<img src="./img/meishi/meishi1.jpg" />
							<img src="./img/meishi/meishi2.jpg" />
							<img src="./img/meishi/meishi3.jpg" />
							<img src="./img/meishi/meishi4.jpg" />
						</div>
					</div>

					<div class="boxFourBodyhezi">
						<div class="boxFourBodyheziTop">
							<img src="./img/tx12.jpg" />
							<div class="boxFourBodyheziTopqiqi">
								<h1>痴心不改</h1>
								<p>7小时前</p>
							</div>
						</div>
						<div class="boxFourBodyheziModdle">
							<h3>如果在意体重，那就对不起食物了</h3>
						</div>
						<div class="boxFourBodyheziBottom">
							<img src="./img/meishi/meishi5.jpg" />
							<img src="./img/meishi/meishi6.jpg" />
							<img src="./img/meishi/meishi7.jpg" />
							<img src="./img/meishi/meishi8.jpg" />
						</div>
					</div>

				</div>
				<div class="boxFourBodyBox">
					<div class="boxFourBodyhezi">
						<div class="boxFourBodyheziTop">
							<img src="./img/tx13.jpg" />
							<div class="boxFourBodyheziTopqiqi">
								<h1>黑色的夜</h1>
								<p>13小时前</p>
							</div>
						</div>
						<div class="boxFourBodyheziModdle">
							<h3>吃货的最高境界：眼见为食</h3>
						</div>
						<div class="boxFourBodyheziBottom">
							<img src="./img/meishi/meishi9.jpg" />
							<img src="./img/meishi/meishi10.jpg" />
							<img src="./img/meishi/meishi11.jpg" />
							<img src="./img/meishi/meishi12.jpg" />
						</div>
					</div>

					<div class="boxFourBodyhezi">
						<div class="boxFourBodyheziTop">
							<img src="./img/tx14.jpg" />
							<div class="boxFourBodyheziTopqiqi">
								<h1>独饮敌敌畏</h1>
								<p>1小时前</p>
							</div>
						</div>
						<div class="boxFourBodyheziModdle">
							<h3>于平凡中发现美味，于深夜里品位温暖</h3>
						</div>
						<div class="boxFourBodyheziBottom">
							<img src="./img/meishi/meishi13.jpg" />
							<img src="./img/meishi/meishi14.jpg" />
							<img src="./img/meishi/meishi15.jpg" />
							<img src="./img/meishi/meishi16.jpg" />
						</div>
					</div>

				</div>

			</div>
			<!-- aaaaaaaaaaaaaaaaa -->
			<div class="boxFourBody" style="display: none;">
				<div class="boxFourBodyBox">
					<div class="boxFourBodyhezi">
						<div class="boxFourBodyheziTop">
							<img src="./img/tx15.jpg" />
							<div class="boxFourBodyheziTopqiqi">
								<h1>丁香愁满地</h1>
								<p>8小时前</p>
							</div>
						</div>
						<div class="boxFourBodyheziModdle">
							<h3>恋爱可以慢慢谈，肉必须得趁热吃</h3>
						</div>
						<div class="boxFourBodyheziBottom">
							<img src="./img/de04.png" />
							<img src="./img/de05.png" />
							<img src="./img/de06.png" />
							<img src="./img/de07.png" />
						</div>
					</div>

					<div class="boxFourBodyhezi">
						<div class="boxFourBodyheziTop">
							<img src="./img/tx16.jpg" />
							<div class="boxFourBodyheziTopqiqi">
								<h1>抠门老大哥</h1>
								<p>14小时前</p>
							</div>
						</div>
						<div class="boxFourBodyheziModdle">
							<h3>吃喜欢的东西，过可爱的人生</h3>
						</div>
						<div class="boxFourBodyheziBottom">
							<img src="./img/meishi/meishi7.jpg" />
							<img src="./img/meishi/meishi18.jpg" />
							<img src="./img/meishi/meishi19.jpg" />
							<img src="./img/meishi/meishi20.jpg" />
						</div>
					</div>

				</div>


				<div class="boxFourBodyBox">
					<div class="boxFourBodyhezi">
						<div class="boxFourBodyheziTop">
							<img src="./img/tx17.jpg" />
							<div class="boxFourBodyheziTopqiqi">
								<h1>糖醋脚皮</h1>
								<p>2小时前</p>
							</div>
						</div>
						<div class="boxFourBodyheziModdle">
							<h3>美食，是可以吃下去的幸福记忆</h3>
						</div>
						<div class="boxFourBodyheziBottom">
							<img src="./img/meishi/meishi3.jpg" />
							<img src="./img/meishi/meishi8.jpg" />
							<img src="./img/meishi/meishi10.jpg" />
							<img src="./img/meishi/meishi13.jpg" />
						</div>
					</div>

				</div>

			</div>
			<!-- aaaaaaaaaaaaaaaaaaaaaa -->
		</div>








	</div>

	<!-- 公共底部 -->
	<div class="xtx_footer clearfix">
		<div class="wrapper">
			<!-- 联系我们 -->
			<div class="contact clearfix">
				<dl>
					<dt>客户服务</dt>
					<dd class="chat">在线客服</dd>
					<dd class="feedback">问题反馈</dd>
				</dl>
				<dl>
					<dt>关注我们</dt>
					<dd class="weixin">公众号</dd>
					<dd class="weibo">微博</dd>
				</dl>
				<dl>
					<dt>下载APP</dt>
					<dd class="qrcode">
						<img src="./img/qrcode.jpg">
					</dd>
					<dd class="download">
						<span>扫描二维码</span>
						<span>立马下载APP</span>
						<a href="javascript:;">下载页面</a>
					</dd>
				</dl>
				<dl>
					<dt>服务热线</dt>
					<dd class="hotline">
						400-0000-000
						<small>周一至周日 8:00-18:00</small>
					</dd>
				</dl>
			</div>
		</div>
		<!-- 其它 -->
		<div class="extra">
			<div class="wrapper">
				<!-- 口号 -->
				<div class="slogan">
					<a href="javascript:;" class="price">价格亲民</a>
					<a href="javascript:;" class="express">物流快捷</a>
					<a href="javascript:;" class="quality">品质新鲜</a>
				</div>
				<!-- 版权信息 -->
				<div class="copyright">
					<p>
						<a href="javascript:;">关于我们</a>
						<a href="javascript:;">帮助中心</a>
						<a href="javascript:;">售后服务</a>
						<a href="javascript:;">配送与验收</a>
						<a href="javascript:;">商务合作</a>
						<a href="javascript:;">搜索推荐</a>
						<a href="javascript:;">友情链接</a>
					</p>
					<p>CopyRight &copy; 旅游网</p>
				</div>
			</div>
		</div>
	</div>
</div>
	<!-- <script src="js/index.js"></script> -->
	<script src="./tools/swiper.min.js"></script>
	<script src="./js/delicacy.js"></script>
</body>

</html>